<template>
  <div class="home">
        <div class="top-bar-wp">
            <div class="top-bar">
                <a href="#"><img class="top-logo" src="../img/logo.png" alt=""></a>
                <div class="top-search-wp">
                    <input type="text" class="top-search" placeholder="搜索" @click="searchFn">
                    <i class="iconfont icon-search"></i>
                </div>
                <a href="#"><i class="top-btn iconfont icon-other"></i></a>
            </div>
        </div>
        <div class="content">
            <div class="swiper-container content-banner-wp">
                <ul class="swiper-wrapper content-banner clearfixed" ref="mySwiper">
                  <li class="swiper-slide">
                    <img src="../img/banner1.jpg" alt="">
                  </li>
                  <li class="swiper-slide">
                    <img src="../img/banner2.jpg" alt="">
                  </li>
                  <li class="swiper-slide">
                    <img src="../img/banner3.jpg" alt="">
                  </li>
                </ul>
                <div class="pagination" style="position:absolute;z-index:90"></div>
            </div>
            <div class="content-nav">
                <div class="content-nav-first">
                    <div>
                      <div class="content-nav-first-circle" @click="jichuFn">
                          <i class="iconfont icon-barrage"></i>
                      </div>
                      <div>基础</div>
                    </div>
                    <div>
                        <div  class="content-nav-first-circle" @click="gysbFn">
                            <i class="iconfont icon-emoji"></i>
                        </div>
                        <div>公用设备</div>
                    </div>
                    <div>
                        <div  class="content-nav-first-circle">
                            <i class="iconfont icon-flag"></i>
                        </div>
                        <div>岩土</div>
                    </div>
                    <div>
                        <div  class="content-nav-first-circle">
                            <i class="iconfont icon-flashlight"></i>
                        </div>
                        <div>结构</div>
                    </div>
                </div>

                <div class="content-nav-second">
                    <div>
                        <div class="content-nav-first-circle">
                            <i class="iconfont icon-label"></i>
                        </div>
                        <div>电气</div>
                    </div>
                    <div>
                        <div  class="content-nav-first-circle">
                            <i class="iconfont icon-like"></i>
                        </div>
                        <div>消防</div>
                    </div>
                    <div>
                        <div  class="content-nav-first-circle">
                            <i class="iconfont icon-mail"></i>
                        </div>
                        <div>环保</div>
                    </div>
                    <div>
                        <div  class="content-nav-first-circle">
                            <i class="iconfont icon-praise"></i>
                        </div>
                        <div>80课堂</div>
                    </div>
                </div>
            </div>
            <div class="content-list">
                <div class="content-list-title">
                  <div>注册公用设备工程师</div>
                  <router-link :to="`/ClassDetail/${publicData[0].type}`"> <span class="content-list-title-icon">···</span> </router-link>
                </div>
                <div class="content-list-books">
                    <div class="content-list-book" v-for="(list,index) in publicData" :key="index">
                        <router-link :to="`/BookDetail/${list.id}`">
                            <img src="../img/book1.jpg" alt="">
                            <div class="content-list-book-info">
                                <p class="content-list-book-name">{{list.name}}</p>
                                <p class="content-list-book-params"><span>材质：</span>{{list.caizhi}}</p>
                                <p class="content-list-book-params"><span>销量：</span>{{list.xiaoliang}}</p>
                                <p class="content-list-book-params"><span>价格：</span><span class="content-list-book-price">{{list.price}}</span> </p> 
                            </div>
                        </router-link>
                    </div>
                </div> 
                <div class="pagenation ">
                    <div class="pagePrev" @click="pagePrevPublic">&lt;</div>
                    <div class="pagenationSelectDiv">
                        <select class="pageSelect" v-model="pageSelect">
                            <option v-for="(list,index) in publicTotal" :key="index" :value="`${index+1}`" class="pageOptions">{{index+1}}&nbsp;&nbsp;/&nbsp;&nbsp;{{publicTotal}}</option>
                        </select>
                    </div>
                    <div class="pageNext" @click="pageNextPublic">&gt;</div>
                </div>
            </div>   
            <div class="content-list">
                <div class="content-list-title" style="background:#90caf8;color:#fff">
                    <div>注册基础类</div>
                    <router-link :to="`/ClassDetail/${baseData[0].type}`">
                      <span class="content-list-title-icon">···</span>
                    </router-link>
                </div>
                <div class="content-list-books">
                    <div class="content-list-book" v-for="(list,index) in baseData" :key="index">
                        <router-link :to="`/BookDetail/${list.id}`">
                            <img src="../img/book1.jpg" alt="">
                            <div class="content-list-book-info">
                                <p class="content-list-book-name">{{list.name}}</p>
                                <p class="content-list-book-params"><span>材质：</span>{{list.caizhi}}</p>
                                <p class="content-list-book-params"><span>销量：</span>{{list.xiaoliang}}</p>
                                <p class="content-list-book-params"><span>价格：</span><span class="content-list-book-price">￥{{list.price}}</span> </p> 
                            </div>
                        </router-link>
                    </div>
                </div> 
                <div class="pagenation">
                    <div class="pagePrev" @click="pagePrevBase">&lt;</div>
                    <div class="pagenationSelectDiv">
                        <select class="pageSelect" v-model="pageSelectBase">
                            <option class="pageOptions" v-for="(list,index) in baseTotal" :value="`${index+1}`">{{index+1}}&nbsp;&nbsp;/&nbsp;&nbsp;{{baseTotal}}</option>
                        </select>
                    </div>
                    <div class="pageNext"  @click="pageNextBase">&gt;</div>
                </div>
            </div>

        </div> 
        <div class="backTop" @click="goTopFn" v-show="isReturnTop">
	    		<span class="iconfont icon-packup return-top" style="color:#3285ff;background-color:#ccc"></span>
			  </div>

  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import { createNamespacedHelpers } from 'vuex'
const { mapActions,mapState } = createNamespacedHelpers('home')
export default {
  name: 'Home',
  data () {
    return {
      isReturnTop:false,
      publicData:[{type:''}],
      baseData:[{type:''}],
      currentPagePublic:1,
      currentPageBase:1,
      pageSelect:1,
      pageSelectBase:1,
    }
  },
  mounted(){
      window.addEventListener('scroll', this.scrollToTop)
      this.unitSwiper()
      this.getDetailData0(1).then(data=>this.publicData = data)
      this.getDetailData1(1).then(data=>this.baseData = data)
      },
  computed:{
      ...mapState(['publicTotal','baseTotal'])
  },
  watch:{
      //监听设备类分页选择框
      pageSelect(newV,oldV){
          if(newV>oldV){
            if(this.currentPagePublic < this.publicTotal){
              this.currentPagePublic = newV
              this.getDetailData0(this.currentPagePublic).then(data=>this.publicData = data)
        }
          }else{
            if(this.currentPagePublic > 1){
              this.currentPagePublic = newV
              this.getDetailData0(this.currentPagePublic).then(data=>this.publicData = data)
        }
          }
      },
      //监听进出类分页选择框
      pageSelectBase(newV,oldV){
          if(newV>oldV){
            if(this.currentPageBase < this.baseTotal){
              this.currentPageBase = newV
              this.getDetailData1(this.currentPageBase).then(data=>this.baseData = data)
        }
          }else{
            if(this.currentPageBase > 1){
              this.currentPageBase = newV
              this.getDetailData1(this.currentPageBase).then(data=>this.baseData = data)
        }
          }
      }
  },
  methods:{
      ...mapActions(['getDetailData0','getDetailData1','getClassDetailData']),
      //基础类logo跳转详情
      jichuFn(){
        this.$router.push({name:'classDetail',params:{type:'注册基础类'}})
      },
      //公用设备logo跳转详情
      gysbFn(){
        this.$router.push({name:'classDetail',params:{type:'注册公用设备工程师'}})
      },
      // 输入框获取焦点搜索
      searchFn(){
         this.$router.push('./Search')
      },
      //公用设备类分页
      pageNextPublic(){
        if(this.currentPagePublic < this.publicTotal){
            this.currentPagePublic++
            this.pageSelect++
            this.getDetailData0(this.currentPagePublic).then(data=>this.publicData = data)
        }
      },
      pagePrevPublic(){
        if(this.currentPagePublic > 1){
          this.currentPagePublic--
          this.pageSelect--
          this.getDetailData0(this.currentPagePublic).then(data=>this.publicData = data)
        }
      },
      //基础类分页
      pageNextBase(){
        if(this.currentPageBase < this.baseTotal){
            this.currentPageBase++
            this.pageSelectBase++
            this.getDetailData1(this.currentPageBase).then(data=>this.baseData = data)
        }
      },
      pagePrevBase(){
        if(this.currentPageBase > 1){
          this.currentPageBase--
          this.pageSelectBase--
          this.getDetailData1(this.currentPageBase).then(data=>this.baseData = data)
        }
      },
      //返回顶部
      goTopFn(){
          // window.scrollTo(0,0)
          let timer = setInterval(function () {
          let osTop = document.documentElement.scrollTop || document.body.scrollTop
          let ispeed = Math.floor(-osTop / 5)
          document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
          if (osTop === 0) {
            clearInterval(timer)
          }
        },30)
      },
      //初始化图片轮播
      unitSwiper(){
        var mySwiper = new Swiper('.swiper-container', {
              autoplay:true,
              speed:300,
              loop:true,
              autoplayDisableOnInteraction : false,
              pagination: {
              el: ".pagination",
              type: "custom",
              renderCustom: function(swiper, current, total) {
                var customPaginationHtml = "";
                for (var i = 0; i < total; i++) {
                  //判断哪个分页器此刻应该被激活
                  if (i == current - 1) {
                    customPaginationHtml +=
                      '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                  } else {
                    customPaginationHtml +=
                      '<span class="swiper-pagination-customs"></span>';
                  }
                }
                return '<span class="swiperPag">'+customPaginationHtml+'</span>';
              }
            }
              // onClick: function(swiper){
              //   alert('你点了Swiper');
              //   alert(mySwiper.realIndex);     //当前索引
              // }
            })
      },
      //获取滚动条高度
      scrollToTop() { 
  　　var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop > 468){
          this.isReturnTop = true
        }else{
          this.isReturnTop = false
        }
  }  
    },
    destroyed () {
      window.removeEventListener('scroll', this.scrollToTop); 
  }  
}
</script>

<style scoped>
a{
  text-decoration: none;
  color: inherit;
}
.top-bar-wp{
  z-index: 10;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 40px;
  background-color: #ffcc80;
  max-width: 768px;
  margin: 0 auto;
}
.top-bar{
  display: flex;
  align-items: center;
  height: 40px;
  padding-left: 10px;
  padding-right: 12px;
}
.top-logo{
  width: 26px;
  height: 26px;
  position: relative;
  top: 2px;
}
.top-btn{
  margin-left: 14px;
  font-size: 28px;
  width: 31px;
  height: 18px;
  color: #fff;
}
.top-search-wp{
  flex-grow: 1;
  height: 24px;
  width: 100%;
  margin-left: 12px;
  position: relative;
}
.top-search-wp .icon-search{
  position: absolute;
  top: 2px;
  left: 5px;
  color: #999;
  font-size: 20px;
}
.top-search{
  flex-grow: 1;
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 20px;
  text-indent: 10px;
  font-size: 12px;
  text-indent: 25px;
}
.content{
  margin: 40px auto 50px;
  max-width: 768px;
}
.content-banner-wp{
  width: 100%;
  height: 96px;
  background-color: antiquewhite; 
  overflow: hidden;
}
.content-banner-wp img{
  width: 100%;
  height: 100%;
}
.content-nav{
  width: 100%;
  height: 196px;
  border: 1px solid #eee;
  font-size: 12px;
  background-color: #fff;
}
.content-nav-first{
  margin: 10px 0;
}
.content-nav-first,.content-nav-second{
  display: flex;
  text-align: center;
}
.content-nav-first>div,.content-nav-second>div{
  flex-grow: 1;
  width: 25%;
}
.content-nav-first-circle{
  width: 52px;
  height: 52px;
  margin: 8px auto;
  border-radius: 50%;
  background-color: #eee;
  position: relative;
}
.content-nav-first-circle i{
  position: absolute;
  top: 15px;
  font-size: 23px;
  left: 15px;
}
.content-list{
  padding-top: 8px;
}
.content-list-title{
  height: 45px;
  line-height: 45px;
  font-size: 14px;
  padding-left: 8px;
  color: #3285ff;
  display: flex;
  background:rgba(207,147,217,0.2);
  border-radius: 4px 4px 0 0;
}
.content-list-title>div{
  flex-grow: 1;
}
.content-list-title-icon{
  display: block;
  width: 28px;
  height: 45px;
  line-height: 45px;
  color: #ccc;
  font-weight: 1000;
}
.content-list-books{
  display: flex;
  flex-flow:row wrap;
  width: 100%;
  background-color: #fff;
}
.content-list-book{
  width: 47%;
  margin-left: 1.5%;
  margin-right: 1.5%;
  padding-bottom: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.content-list-book img{
  border-radius: 4px;
  width: 100%;
}
.content-list-book-name{
  font-size: 13px;
  color: #333;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.4;
}
.content-list-book-info{
  padding: 8px 0 0 6px;
}
.content-list-book-params{
    font-size: 11px;
    color: #666;
    line-height: 17px;
}
.content-list-book-price{
  color: #3285ff;
  word-wrap: break-word;
}

.pagenation{
    font-size: 14px;
    color: #333;
    height: 50px;
    width: 100%;
    text-align: center;
    position: relative;
    line-height: 50px;
    background-color: #fff;
}
.pagenation .pageNext, .pagenation .pagePrev {
    width: 26px;
    height: 26px;
    background: #3285ff;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    background-size: 100%;
    line-height: 21px;
    color: #fff;
    position: absolute;
    top: 15px;
}
.pagenation .pagePrev{
  left: 105px;
}
.pagenation .pageNext{
  left: 190px;
}
.pageSelect{
  width: 72px;
  height: 25px;
  line-height: 1.05rem;
  font-size: 12px;
  border: none;
  background: 0 0;
  border-radius: 20px;
  position: relative;
  left: 10px;
  outline: none;
  /* appearance: none; */
  padding: 0 7px;
  margin-bottom: 10px;
  background: #fff;
  font-weight: 400;
  margin-top: 12px;
  text-indent: 0;
}
/* .not-arrow::-ms-expand{
  display: none;
} */
</style>
